<template>
  <div>
    <el-select
      clearable
      :style="{ width: width }"
      v-bind="setAttrs(item)"
      filterable
      v-model="selectValue"
      :filter-method="filterMethod"
      :popper-append-to-body="false"
      :default-first-option="false"
      @blur="onBlur"
      @focus="onFocus"
      @change="selectChange"
      :placeholder="placeholder || '请选择'"
    >
      <div
        style="height: 250px; overflow: auto"
        v-select-loadmore="loadmore"
        class="el-select-option-load"
      >
        <el-option
          v-for="(option, i) of lineIdList"
          :key="i"
          :label="option.label"
          :value="option.value"
        />
        <p v-if="noMore" style="text-align: center">没有更多了</p>
        <p v-else style="text-align: center">加载中...</p>
      </div>
    </el-select>
  </div>
</template>
<script lang="ts">
export default {
  directives: {
    "select-loadmore": {
      mounted(el, binding) {
        el.addEventListener("scroll", function () {
          const condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      },
      // 下拉框对象
    },
  },
};
</script>
<script></script>
<script lang="ts" setup>
import { lineService } from "@/api/line";

const props = defineProps({
  item: {
    type: Object,
  },
  width: {
    type: String,
    default: "100%",
  },
  modelValue: String,
  search: Object,
  placeholder: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["update:modelValue", "change"]);
const selectChange = (val: any) => {
  console.log(val,'selectChange')
  emit("update:modelValue", val);
};
const selectValue = ref("");
const setAttrs = (params) => {
  const { slot, ...options } = params;
  return { ...options, slot };
};
const model = ref({ ...props.item });
const page = ref({
  pageNumber: 1,
  pageSize: 10,
  total: 0,
});
const lineIdList = ref([]);
watch(
  () => props.item,
  (val) => {
    model.value = { ...val };
  }
);
watch(
  () => props.search,
  (val) => {
    getLineList();
  },
  {
    deep: true,
  }
);
watch(
  () => props.modelValue,
  (val) => {
    selectValue.value = val;
  },
  { immediate: true }

);
const loading = ref(false);
const noMore = computed(() => lineIdList.value.length >= page.value.total);
const disabled = computed(() => loading.value || noMore.value);
const getLineList = () => {
  page.value.pageNumber = 1;
  lineService[model.value.funName]({
    pageNumber: 1,
    pageSize: 10,
    data: {
      ...props.search,
    },
  }).then((res) => {
    page.value.total = res.data.total;
    lineIdList.value = res.data.content.map((n) => {
      return {
        label: n[model.value.key],
        value: n[model.value.key] + "",
      };
    });
  });
};
const filterValue = ref("");
const loadmore = () => {
  if (!noMore.value && !loading.value) {
    loading.value = true;
    page.value.pageNumber += 1;
    lineService[model.value.funName]({
      pageNumber: page.value.pageNumber,
      pageSize: 10,
      data: {
        [model.value.key]: filterValue.value,
        ...props.search,
      },
    }).then((res) => {
      res.data.content.forEach((n) => {
        lineIdList.value.push({
          label: n[model.value.key],
          value: n[model.value.key] + "",
        });
      });
      setTimeout(() => {
        loading.value = false;
      }, 500);
    });
  }
};

const filterMethod = (query: string) => {
  if (query) {
    loading.value = true;
    filterValue.value = query;
    page.value.pageNumber = 1;
    lineService[model.value.funName]({
      pageNumber: 1,
      pageSize: 10,
      data: {
        [model.value.key]: filterValue.value,
        ...props.search,
      },
    }).then((res) => {
      loading.value = false;
      page.value.total = res.data.total;
      lineIdList.value = res.data.content.map((n) => {
        return {
          label: n[model.value.key],
          value: n[model.value.key] + "",
        };
      });
    });
  } else {
    filterValue.value = "";
    getLineList();
  }
  {
    lineIdList.value = [];
  }
};
const onBlur = ($event) => {
  emit("update:modelValue", $event.target.value);
};
const onFocus = () => {

  if (filterValue.value) {
    filterValue.value = selectValue.value;
  }
};
onMounted(() => {
  getLineList();
});
</script>

<style lang="less" scoped>
.infinite-list-wrapper {
  height: 100%;
}
.el-select-option-load::-webkit-scrollbar {
  width: 5px;
}
</style>
